<template>
     <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" v-if="headerShow">
                <div class="search-form" style="padding: 10px;box-sizing: border-box;">  
                    <a-form size="small" :model="searchData" auto-label-width layout="inline"> 
                            
                                <a-form-item label="开单日期" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-range-picker  popup-container="html"  @change="changBillDate"  class="bacClass" />
                                </a-form-item>
                           
                           
                                <a-form-item label="流转卡号" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input  v-model="searchData.circulatCard"  allow-clear class="bacClass"/>
                                </a-form-item>
                           
                            
                                <a-form-item label="客户名称" label-col-flex="80px" :style="{width:'320px'}"> 
                                    <a-input  v-model="searchData.customName"  allow-clear class="bacClass"/>
                                </a-form-item>
                           
                           
                                <a-form-item label="色号" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input  allow-clear  v-model="searchData.colorCode" class="bacClass"/>
                                </a-form-item>
                           
                       
                                <a-form-item label="布号" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input  allow-clear  v-model="searchData.clothCode" class="bacClass"/>
                                </a-form-item>
                           
                           
                                <a-form-item label="品名" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input  allow-clear  v-model="searchData.brandName" class="bacClass"/>
                                </a-form-item>
                           
                        
                    </a-form>    
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>   
            <div class="my-tool-bar" style="padding:0px 10px 10px 0px;box-sizing: border-box;">
                <Toolbar 
                    :items="['查询','导出','打印']"
                    @select="selectHandler"
                    @export="exportHandler"
                    @dyBoufei="dyBoufeiHandler"/>  
            </div>   
        </template>    
        <template #pageTabel>
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" 
                    style="height:100%" class='ag-theme-alpine'
                    :defaultColDef="defaultColDef" :rowData="table.dataList" 
                    :columnDefs="cfsValue" :localeText="localeTextData"/>
        </template>
        <paginationCopys :total="total" show-total show-jumper 
                show-page-size @change="changePage"    
                @page-size-change="changeSize" 
                style="justify-content: center;margin-top: 10px;"     
                :page-size="pagination.pageSize" :current="pagination.page" />
     </PageTabelLayout>
   
</template>

<script lang="ts">
import { reactive, ref,onMounted} from 'vue'
import { useTable, useRowKey, usePagination, useRowSelection } from '@/hooks/table'
import { verifyAbnorma } from '@/api/PhysicalSurveyRoom/physicalTestApi'
import { orderFn as labOtherFn } from '@/api/laboratory/other'
import Message from '@arco-design/web-vue/es/message'
import PageTabelLayout from '@/components/pageTabelLayout.vue'

import { localeText } from '@/api/aggridZw'
import emitter from "@/hooks/useEventBus";
import { assTable } from '@/utils/assemblyLevelTable'
export default {
    name: "phyAnomalieList",
    setup() {
        const verifyAbnormaApi = verifyAbnorma();
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            doRefresh();
            emitter.on("refresh-phyAnomalieList", () => {
                doRefresh();
                // gridOption.value.sizeColumnsToFit();
            });
        });
        let headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal:boolean) => { 
            headerShow.value = boolVal;
            emitter.emit('window-change'); 
        }
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const exportHandler = () => {
            let selectList = gridOption.value.getSelectedRows();
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue,nowRow,'物测异常列表');
            }
         }; 
        const dyBoufeiHandler = () => { };
        const pageData = reactive<{
            circulDropList: any[];
        }>({
            circulDropList: [],
        });
        //下拉数据
        const options = ref<any>();
        const loading = ref(false);
        const seatchHandler = async (value: any, e: any) => {
            if (value) {
                loading.value = true;
                await selectChange(e, value, (data: any) => {
                    options.value = data;
                });
                loading.value = false;
            }
            else {
                options.value = [];
            }
        };
        const selectChange = async (e: any, value: string = "", cb = (data: any) => { return data; }) => {
            //获取流转卡号下拉列表信息数据
            //   console.log(value);
            await labOtherFn().getCirculDropList({ flowCardCode: value, }).then(res => {
                if (res.code === 200) {
                    pageData.circulDropList = res.data;
                    cb(res.data);
                }
                else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        };
        const doRefresh = async () => {
            await verifyAbnormaApi.getVerifyAbnormaList({
                page: pagination.page,
                size: pagination.pageSize,
                ...searchData
            }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    let projectMaps = res.data.verifyProjectList.map((v: any) => {
                        return {
                            headerName: v,
                            field: v,
                        };
                    });
                    // console.log(projectMaps);
                    projectMaps.forEach((v: any, i: number) => {
                        cfsValue[12].children[i] = projectMaps[i];
                    });
                    let data = res.data.data;
                    let arrData:any = [];
                    data.forEach((v:any) => {
                        arrData.push({
                            ...v,
                            ...v.verifyProjectMap
                        }) 
                    });
                    table.handleSuccess(arrData);
                    gridOption.value.setColumnDefs(cfsValue);
                }
            }).catch(console.log);
        };
        const scrollbar = ref(true);
        const pagination = usePagination(doRefresh);
        const { selectedRowKeys } = useRowSelection();
        const changBillDate = (date: any) => {
            if (date && date.length > 0) {
                searchData.beginDate = date[0];
                searchData.endDate = date[1];
                return;
            }
            ;
            searchData.beginDate = "";
            searchData.endDate = "";
        };
        const searchData = reactive<{
            beginDate: string | undefined;
            endDate: string | undefined;
            clothCode: string | undefined;
            brandName: string | undefined;
            circulatCard: string | undefined;
            customName: string | undefined;
            colorCode: string | undefined;
        }>({
            beginDate: "",
            endDate: "",
            clothCode: "",
            brandName: "",
            circulatCard: "",
            customName: "",
            colorCode: ""
        });
        const table = useTable();
        const rowKey = useRowKey("id");
        const verifyObj = reactive<{
            verifyProjectList: {
                title: string | undefined;
                key: string | undefined;
                dateIndex: string | undefined;
                width: 150;
            }[];
        }>({
            verifyProjectList: []
        });
         //表格方面
        const gridOption = ref();
        const gridReady = (params:any) => {
          gridOption.value = params.api;
          //调整表格自适应大小
          gridOption.value.sizeColumnsToFit(); 
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150 
            // flex: 1
        }
        let cfsValue:any = [
            {
               headerName:'记录单号',
               field:'verifyManageCode',
            },
            {
               headerName:'开单日期',
               field:'verifyManageDate',
            },
            {
               headerName:'流转卡号',
               field:'circulatCard',
            },
            {
               headerName:'客户名称',
               field:'customName',
            },
            {
               headerName:'客户单号',
               field:'customOrderNo',
            },
            {
               headerName:'布号',
               field:'clothCode',
            },
            {
               headerName:'品名',
               field:'brandName',
            },
            {
               headerName:'色号',
               field:'colorCode',
            },
            {
               headerName:'色称',
               field:'colorName',
            },
            {
                headerName:'要求',
                children:[
                    {
                        headerName:'克重',
                        field:'requireWeight'
                    },
                    {
                        headerName:'门幅',
                        field:'requireWidth'
                    },
                ]
            },
            {
                headerName:'实测',
                children:[
                    {
                        headerName:'克重',
                        field:'measuredWeight'
                    },
                    {
                        headerName:'门幅',
                        field:'measuredWidth'
                    },
                ]
            },
            {
                headerName:'不合格项',
                children:[],
            },
            {
               headerName:'匹数',
               field:'pieceNum',
            },
            {
               headerName:'重量',
               field:'weight',
            },
        ]
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val:any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val:any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const localeTextData :any = ref(localeText);
        

        return {
            selectHandler,
            exportHandler,
            dyBoufeiHandler,
            searchData,
            scrollbar,
            pagination,
            selectedRowKeys,
            table,
            rowKey,
            changBillDate,
            verifyObj,
            seatchHandler,
            selectChange,
            pageData,
            options,
            loading,
            headerShow,
            changePage,
            changeSize,
            localeTextData,
            defaultColDef,
            gridReady,
            cfsValue,
            total,
            changHeadShow,
        };
    },
    components: { PageTabelLayout, }
}
</script>

<style scoped>
.bacClass{
  width: 270px;background: #fff;border: 1px solid #c9cdd3;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>